<template>
    <section v-if="s_show">
        <van-popup v-model="show" position="bottom" class="popou_class" @close="close_show">
            <router-link to="/zizhufuwu" style="color: #a42e5f;">{{$t('kefu.caozuozhinan')}}</router-link>
            <a style="color:#fff;" :href="whatsapp">Whats:{{this.$store.state.config.whatsapp}}</a>
            <a :href="service_link" style="color: #D98719;">{{$t('kefu.xianshangkefu')}}</a>
            <router-link to="" @click.native="fun_wx" style="color: #D9D919;">{{$t('kefu.wx')}}</router-link>
            <a :href="'tel:' + this.$store.state.config.tel" style="color: red;">{{$t('kefu.tousudianhua')}}</a>
        </van-popup>
        <van-popup v-model="wx_show"  @close="close_show">
            <img :src="this.$https.baseUrl + this.$store.state.config.wx_pic" alt="" class="img">
        </van-popup>

        <iframe_alt :show="iframe_show" :type="1" :src="iframe_src" @close="close"></iframe_alt>
    </section>

</template>

<script>
    import {Popup} from 'vant'
    import iframe_alt from "@/components/iframe_alt"
    export default {
        name: "kefu",
        props: {
            show: {
                type:Boolean,
                default: false
            },
            s_show: {
                type:Boolean,
                default: false
            }
        },
        components: {
            [Popup.name]: Popup,
            iframe_alt
        },
        data() {
            return {
                wx_show: false,
                iframe_show: false,
                iframe_src: '',
                iframe_type: '',
                service_link: this.$store.state.config.service_link,
                whatsapp: this.$store.state.config.whatsapp_url
            }
        },
        methods: {
            iframe_s(src, type){
                this.iframe_show = true
                this.iframe_src = src
                this.iframe_type = type
            },
            close() {
                this.iframe_show = false
            },
            fun_wx() {
               this.wx_show = true
                this.show = false
            },
            close_show() {
                if(this.wx_show == false){
                    this.$emit('fun_kefu_x')
                }

                // this.$emit('kefu_show',false)
                // this.$emit('s_show',false)
                // this.$emit('fun_kefu_x')
            }
        }
    }
</script>

<style scoped lang="less">
    .popou_class{
        border-radius: 5px 5px 0 0;
        background-color: rgba(255,255,255,.8);
        padding: .5rem;
        height: 8.3rem;
        a{
            display: block;
            font-size: .34rem;
            line-height: 1.3rem;
            background-color: rgba(0,0,0,.8);
            margin-bottom: .2rem;
            border-radius: 5px;
        }
    }
    .img{
        width: 7rem;
    }

</style>
